<template>
  <div class="wxc-minibar" :style="newBarStyle" v-if="show">
    <div class="left" @click="leftButtonClicked" aria-label="返回" :accessible="true">
      <slot name="left">
        <image :src="leftButton"
               v-if="leftButton && !leftText"
               class="left-button"></image>
        <text v-if="leftText"
              class="icon-text"
              :style="{ color: textColor }">{{leftText}}</text>
      </slot>
    </div>
    <slot name="middle">
      <text class="middle-title" :style="{ color: textColor, 'font-size': textSize }">{{title}}</text>
    </slot>
    <div class="right" @click="rightButtonClicked">
      <slot name="right">
        <image v-if="rightButton && !rightText"
               class="right-button"
               :src="rightButton"
               :aria-hidden="true"></image>
        <text v-if="rightText"
              class="icon-text"
              :style="{ color: textColor }">{{rightText}}</text>
      </slot>
    </div>
  </div>
</template>

<script>
  const Navigator = weex.requireModule('navigator');
  export default {
    name:'wxc-minibar',
    props: {
      backgroundColor: {
        type: String,
        default: '#fff'
      },
      leftButton: {
        type: String,
        // default: 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png'
        default:'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/back_iconW.png'
      },
      textColor: {
        type: String,
          default: '#333'
      },
      rightButton: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: '标题'
      },
      leftText: {
        type: String,
        default: ''
      },
      rightText: {
        type: String,
        default: ''
      },
      useDefaultReturn: {
        type: Boolean,
        default: true
      },
      show: {
        type: Boolean,
        default: true
      },
      barStyle: {
        type: Object
      },
      textSize: {
        type: String,
         default: '34px'
      }
    },
    computed: {
      newBarStyle () {
        const { backgroundColor, barStyle } = this;
        return {
          backgroundColor,
          ...barStyle
        }
      }
    },
    methods: {
      leftButtonClicked () {
        if (this.useDefaultReturn) {
          Navigator.pop({}, e => {
          });
        }
        this.$emit('wxcMinibarLeftButtonClicked', {});
      },
      rightButtonClicked () {
        const hasRightContent = this.rightText || this.rightButton || (this.$slots && this.$slots.right);
        hasRightContent && this.$emit('wxcMinibarRightButtonClicked', {});
      }
    }
  };
</script>


<style scoped>
  .wxc-minibar {
    width: 750px;
    height: 90px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* box-shadow: 0 15px 15px rgba(229,229,229,0.50); */
    /* box-shadow:20px  10px goldenrod; */
  }

  .left {
    width: 180px;
    padding-left: 32px;
    height: 90px;
    display: flex;
    justify-content: center;
  }

  .middle-title {
    font-size: 36px;
    color: #ffffff;
    font-family: PingFangSC-Medium;
    height: 36px;
    line-height: 36px;
  }

  .right {
    width: 180px;
    height: 90px;
    padding-right: 32px;
    justify-content: center;
    align-items: flex-end;
  }

  .left-button {
    width: 54px;
    height: 54px;
  }

  .right-button {
    width: 54px;
    height: 54px;
  }

  .icon-text {
    font-size: 28px;
    font-family: PingFangSC-Medium;
    color: #ffffff;
  }

</style>


